<template>
	<view class="content">
		<comtarbar class="comtarbar">
			<template #center>
				<view class="title">群组</view>
			</template>
			<template #right>
				<view class="btn" @tap="show">创建</view>
			</template>
		</comtarbar>
		<view class="g_main">
			<scroll-view scroll-y="true">
				<view class="groupitem" @tap="goGroupInfo(item.group._id)" v-for="item in getGroupList.group_list" :key="item._id">
					<view class="groupimg"><image :src="item.group.imgUrl" mode="aspectFill"></image></view>
					<view class="groupname">{{ item.group.name }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="creat_drawer" :animation="animationData">
			<view class="mask" :animation="animationData2"></view>
			<view class="create_content">
				<view class="form_title">
					<view class="title_left">创建群组</view>
					<view class="title_right"><image @tap="show" src="../../static/images/common/close.svg" mode="widthFix"></image></view>
				</view>
				<view class="from">
					<view class="from_item">
						<view class="item_left">群头像 ：</view>
						<view class="item_right">
							<view class="imgbox"><image mode="aspectFill" @tap="selectImg" :src="path"></image></view>
						</view>
					</view>
					<view class="from_item">
						<view class="item_left">群名称 ：</view>
						<view class="item_right input_box">
							<view class="input_item"><input v-model="name" placeholder="请输入群名称" /></view>
						</view>
					</view>
				</view>
				<view class="select_title">选择群成员</view>
				<view class="user_box">
					<scroll-view class="scorll-y" scroll-y="true">
						<checkbox-group @change="checkboxChange">
							<template v-for="(value, key, index) in getFriends">
								<view class="ground" v-if="value.length > 0">
									<view class="ground-item" :id="key">{{ key }}</view>
									<view class="item" v-for="(item, index) in value" :key="item._id">
										<label>
											<view class="select-item"><checkbox :value="item.user._id" /></view>
											<view class="item-left">
												<view class="imgbox"><image :src="item.user.avatars" mode="aspectFill"></image></view>
											</view>
											<view class="item-right">{{ item.nickName }}</view>
										</label>
									</view>
								</view>
							</template>
						</checkbox-group>
					</scroll-view>
				</view>
				<view class="btn" @tap="creatBtn">创建群组</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			animationData: {},
			animationData2: {},
			isShow: false,
			scrHeight: 0,
			path: '../../static/images/group/addimage.png',
			name: '',
			user_list: []
		};
	},
	onLoad() {
		this.$store.dispatch('getGroupList');
	},
	onReady() {
		this.getHeight();
	},
	computed: {
		...mapGetters(['getFriends', 'getGroupList'])
	},
	methods: {
		goGroupInfo(id) {
			uni.navigateTo({
				url: '../groupinfo/groupinfo?id=' + id
			});
		},
		show() {
			this.isShow = !this.isShow;
			var animation = uni.createAnimation({
				duration: 600,
				timingFunction: 'ease'
			});
			var animation2 = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease'
			});
			if (this.isShow) {
				animation.bottom(0).step();
				this.animationData = animation.export();
				setTimeout(
					function() {
						animation2.opacity(1).step();
						this.animationData2 = animation2.export();
					}.bind(this),
					600
				);
			} else {
				animation2.opacity(0).step();
				this.animationData2 = animation2.export();
				setTimeout(
					function() {
						animation.bottom(-this.scrHeight).step();
						this.animationData = animation.export();
					}.bind(this),
					400
				);
				let bom = this.scrHeight + 20;
				animation.bottom(-bom).step();
			}
		},
		getHeight() {
			const query = uni.createSelectorQuery().in(this);

			// 屏幕高度
			query
				.select('.content')
				.boundingClientRect(data => {
					this.scrHeight = data.height;
				})
				.exec();
		},
		checkboxChange(e) {
			this.user_list = e.detail.value;
		},
		// 选择头像图片
		selectImg() {
			uni.chooseImage({
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					this.path = tempFilePaths[0];
				}
			});
		},
		// 创建群组按钮
		creatBtn() {
			if (this.name == '') {
				uni.showToast({
					title: '群名称不能为空',
					icon: 'none',
					duration: 2000
				});
			} else if (this.user_list.length == 0) {
				uni.showToast({
					title: '群成员不能少于1人',
					icon: 'none',
					duration: 2000
				});
			} else if (this.path == '../../static/images/group/addimage.png') {
				uni.showToast({
					title: '群头像不能为空',
					icon: 'none',
					duration: 2000
				});
			} else {
				const uploadTask = uni.uploadFile({
					// url: 'http://localhost:3000/upload/group',
					url:"http://www.yemengs.cn/upload/group",
					filePath: this.path,
					name: 'file',
					formData: { 
						token: uni.getStorageSync('token'),
						name: this.name,
						user_list: this.user_list,
						savePath: 'groupAvatars'
					},
					success: uploadFileRes => {
						let data = JSON.parse(uploadFileRes.data);
						let { name, number } = data;
						uni.showModal({
							title: '提示',
							content: '成功创建群聊：' + name + ',群号码为：' + number,
							success: res => {
								if (res.confirm) {
									// console.log('用户点击确定');
									this.show();
								} else if (res.cancel) {
									this.show();
									// console.log('用户点击取消');
								}
							}
						});
						this.$store.dispatch('getGroupList');
						this.path = '../../static/images/group/addimage.png';
						this.name = '';
					}
				});
				uploadTask.onProgressUpdate(res => {});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../commons/css/mycss.scss';
.content {
	position: relative;
	box-sizing: border-box;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}
.comtarbar {
	background: #f0f0f0;
	.btn{
		height: 60rpx;
		width: 100rpx;
		background: #37a603;
		font-size: 32rpx;
		color: white;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
	}
}
.g_main {
	padding: 0rpx 20rpx;
	padding-top: 120rpx;
	width: 100vw;
	height: calc(100% - 120rpx);
	overflow-y: auto;
	position: relative;
	background: #f9f9f9;
	scroll-view {
		height: 100%;
	}
	.groupitem {
		height: 100rpx;
		display: flex;
		border-radius: 8rpx;
		padding-bottom: 10rpx;
		.groupimg {
			flex: 2;
			width: 80rpx;
			height: 80rpx;
			border-radius: 8rpx;
			overflow: hidden;
			image {
				width: 80rpx;
				height: 100%;
				border-radius: 8rpx;
			}
		}
		.groupname {
			flex: 12;
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 20rpx;
			font-size: 30rpx;
		}
	}
}

.g_main .groupitem:not(:last-child) .groupname {
	border-bottom: 2rpx solid rgb(214, 214, 214);
}
.creat_drawer {
	position: absolute;
	bottom: -100vh;
	// bottom: 0;
	left: 0;
	z-index: 99;

	.mask {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background: rgba(0, 0, 0, 0.3);
		z-index: 99;
		opacity: 0;
	}
	.create_content {
		z-index: 100;
		height: 1000rpx;
		width: 100vw;
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgb(254, 254, 254);
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
		.form_title {
			padding: 0rpx 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 2rpx solid #ccc;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			display: flex;
			.title_left {
				flex: 8;
			}
			.title_right {
				flex: 2;
				text-align: right;
				image {
					margin-top: 10rpx;
					width: 60rpx;
					height: 60rpx;
				}
				// background: red;
			}
		}
		.from {
			margin: 20rpx 30rpx;
			.from_item {
				padding-top: 20rpx;
				display: flex;
				.item_left {
					font-size: 30rpx;
				}
				.item_right {
					.imgbox {
						width: 120rpx;
						height: 120rpx;
						overflow: hidden;
						border-radius: 10rpx;
					}
					image {
						width: 100%;
						height: 100%;
					}
				}
				.input_box {
					display: flex;
					.name {
						font-size: 34rpx;
					}
					.input_item {
						border-bottom: 2rpx solid #ccc;
						input {
							padding: 0rpx 10rpx;
							font-size: 30rpx;
						}
					}
					.input_btn {
						font-size: 28rpx;
						color: white;
						padding: 4rpx 20rpx;
						background: #5a9bec;
						border-radius: 8rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
		.select_title {
			padding: 0rpx 30rpx;
			padding-bottom: 20rpx;
			font-size: 32rpx;
		}
		.user_box {
			padding: 0rpx 20rpx;
			height: 520rpx;
			.scorll-y {
				height: 100%;
				background: #e7e7e7;
			}
		}
		.btn {
			margin: 0rpx 20rpx;
			margin-top: 16rpx;
			padding: 10rpx 0rpx;
			font-size: 34rpx;
			color: white;
			background: #5a9bec;
			text-align: center;
		}
	}
}
checkbox-group {
	padding: 20rpx 40rpx;
	box-sizing: border-box;
}
.item {
	height: 88rpx;
	margin: 10rpx 10rpx;
	position: relative;
	label {
		display: flex;
	}
	.select-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-left {
		flex: 2;
		display: flex;
		justify-content: center;
		overflow: hidden;
		.imgbox {
			height: 76rpx;
			margin: 6rpx;
			width: 76rpx;
			border-radius: 10rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.item-right {
		flex: 8;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
	}
}
.ground-item {
	background: rgb(254, 254, 254);
	height: 50rpx;
	color: rgb(99, 99, 99);
	font-size: 26rpx;
	line-height: 50rpx;
	text-indent: 46rpx;
}
.g_main .ground .item:not(:last-child) .item-right {
	border-bottom: 2rpx solid rgb(223, 223, 223);
}
</style>
